<template>
	<view class="progress-box" :style="{height: itemSize + 'rpx'}"
		@touchstart="touchstart"
		@touchmove="touchmove"
		@touchend="touchend">
		
		<!-- nvue中overflow只有hidden属性，所以超出部分会隐藏，为了显示完整的滑块，在进度条2边加上间隔，宽度为滑块宽度的一半 -->
		<view :style="{'width': (itemSize / 2) + 'rpx'}"></view>
		
		<!-- 进度条 -->
		<view id="progress" class="progress" :style="{'background-color': color, height: height + 'rpx'}" ref="progress" @touchstart.stop="lineTouchstart">
			<view class="active" :style="{'background-color': activeColor, width: activeWidth + 'px', height: height + 'rpx'}"></view>
		</view>
		
		<!-- nvue中overflow只有hidden属性，所以超出部分会隐藏，为了显示完成的滑块，在进度条2边加上间隔，宽度为滑块宽度的一半 -->
		<view :style="{'width': (itemSize / 1.5) + 'rpx'}"></view>
		
		<!-- 滑块 -->
		<view class="item"
		v-if="itemShow"
		@touchstart="itemTouchstart"
		ref="item"
		:style="{
			'background-color': activeColor,
			'transform': 'translateX(' + activeWidth + 'px)',
			'width': itemSize + 'rpx',
			'height': itemSize + 'rpx',
			'border-radius': itemSize + 'rpx'
		}"></view>
	</view>
</template>

<script>
	import ComponentMixin from '../../js_sdk/componentMixin.js'
	// #ifdef APP-NVUE
	const dom = weex.requireModule('dom');
	// #endif
	export default {
		mixins: [ComponentMixin],
		props: {
			disabled: {
				type: Boolean,
				default: false
			},
			value: {
				type: [Number,String],
				default: 0
			},
			itemSize: {
				type: Number,
				default: 40
			},
			height: {
				type: Number,
				default: 13
			},
			color: {
				type: String,
				default: '#3D3D3D'
			},
			activeColor: {
				type: String,
				default: '#ED7B1F'
			},
			itemShow: {
				type: Boolean,
				default: false
			}
		},
		data () {
			return {
				//确认手指是否触摸到滑块
				startTouch: false,
				//进度条总宽度
				width: 0,
				//进度条起始位置
				start: 0,
				//进度
				percent: 0,
				//触摸起始点
				pointX: 0,
				//上次进度的记录
				oldPercent: 0
			}
		},
		computed: {
			activeWidth () {
				return (this.width * (parseFloat(this.percent)/100));
			}
		},
		created () {
			this.percent = this.value;
			this.oldPercent = this.percent;
		},
		mounted () {
			//获取整个进度条的宽度
			setTimeout(() => {
				// #ifdef APP-NVUE
				dom.getComponentRect(this.$refs.progress, (res) => {
					this.width = res.size.width;
				})
				// #endif
				// #ifndef APP-NVUE
				let view = uni.createSelectorQuery().in(this).select('#progress');
				view.boundingClientRect((res) => {
					this.width = res.width;
					this.start = res.left;
				}).exec();
				// #endif
			}, 30)
		},
		methods: {
			//手指触摸到滑块
			itemTouchstart (e) {
				if ( this.disabled ) {
					return;
				}
				if ( e.touches.length > 1 ) {
					return;
				}
				this.startTouch = true;
			},
			//滑块触摸开始
			touchstart (e) {
				if ( this.disabled ) {
					return;
				}
				//手指是否触摸到滑块
				if ( !this.startTouch ) {
					return;
				}
				if ( e.touches.length > 1 ) {
					return;
				}
				
				// 记录原本的进度
				this.oldPercent = this.percent;
				
				let touch = e.touches[0];
				this.pointX = touch.pageX;
			},
			//滑块触摸移动
			touchmove (e) {
				if ( this.disabled ) {
					return;
				}
				//手指是否触摸到滑块
				if ( !this.startTouch ) {
					return;
				}
				let touch = e.touches[0];
				
				//触摸移动的距离加上进度条本身进度为当前进度
				this.percent = parseFloat(((touch.pageX - this.pointX) / this.width * 100).toFixed(2)) + this.oldPercent;
				this.setPercent();
			},
			//滑块触摸结束
			touchend (e) {
				if ( this.disabled ) {
					return;
				}
				//手指是否触摸到滑块
				if ( !this.startTouch ) {
					return;
				}
				
				this.startTouch = false;
			},
			//点击进度条本身触发
			lineTouchstart (e) {
				if ( this.disabled ) {
					return;
				}
				if ( e.touches.length > 1 ) {
					return;
				}
				let touch = e.touches[0];
				this.percent = parseFloat(((touch.pageX - this.start) / this.width * 100).toFixed(2));
				this.oldPercent = this.percent;
				this.setPercent();
			},
			setPercent () {
				if ( this.disabled ) {
					return;
				}
				if ( this.percent < 0 ) {
					this.percent = 0
				}
				if ( this.percent > 100 ) {
					this.percent = 100
				}
				this.$emit('input', this.percent);
			}
		},
		watch: {
			value (val) {
				if ( val < 0 ) {
					val = 0
				}
				if ( val > 100 ) {
					val = 100
				}
				this.percent = val;
			}
		}
	}
</script>

<style scoped>
	.progress-box {
		/* #ifndef APP-NVUE */
		display: flex;
		/* #endif */
		position: relative;
		align-items: center;
		justify-content: center;
		flex-direction: row;
	}
	.progress {
		flex: 1;
	}
	.item {
		position: absolute;
		left: 0;
		top: 0;
	}
</style>
